<template>
  <div style="padding: 0 20px 20px" v-if="form">
    <div style="
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 24px;
      ">
      <b> {{ `${$t("name")}：${form.employeeName}` }}</b>
    </div>
    <el-descriptions :column="2">
      <el-descriptions-item :label="$t('gender')"><dict-tag :options="dict.type.leave_sex"
          :value="form.sex" /></el-descriptions-item>
      <el-descriptions-item :label="$t('mobile_number')">
        {{ form.phone || '-' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('company_email')">
        {{ form.emailCompany || '-'  }}</el-descriptions-item>
      <el-descriptions-item :label="$t('department')">
        {{ form.employerDeptNames || '-'  }}</el-descriptions-item>
      <slot name="customLabel"></slot>
    </el-descriptions>
  </div>
</template>
<script>
import { getEmployee } from "@/api/custom/employeeList";
import { deptTreeSelect } from "@/api/system/user";
export default {
  name: "Employee",
  dicts: ["leave_sex"],
  components: {},
  props: {
    empId: {
      type: [String, Number],
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      // 表单参数
      form: null,
    };
  },
  created() { },
  watch: {
    empId: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect(this.empId).then((response) => {
        this.deptOptions = response.data;
        this.getData();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 查看操作 */
    getData() {
      getEmployee(this.empId).then((response) => {
        const form = response.data;
        console.log(form);
        if (form.employment) {
          if (form.employment.department) {
            form.departmentName = this.findItemById(
              this.deptOptions,
              form.employment.department
            ).label;
          }
        } else {
          form.departmentName = "-";
        }
        this.form = form;
      });
    },
    findItemById(list, id) {
      if (!list || !Array.isArray(list) || list.length === 0) {
        return null;
      }
      for (let item of list) {
        if (item.id == id) {
          return item;
        } else {
          const t = this.findItemById(item.children, id);
          if (t) {
            return t;
          }
        }
      }
      return null;
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 20px;
}
</style>
